<template>
  <div v-loading="loading">
    <!-- 筛选条件 start -->
    <div class="filter-container">
      <el-form
        ref="filterForm"
        :model="filterForm"
        inline
        label-width="100px"
        size="small"
      >
        <el-form-item
          prop="date"
          label="下单时间："
        >
          <el-date-picker
            v-model="filterForm.date"
            :default-time="['00:00:00', '23:59:59']"
            type="datetimerange"
            range-separator="~"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="业务类型：" prop="bizCode">
          <el-select
            v-model="filterForm.bizCode"
            filterable
            collapse-tags
            placeholder="可通过名称搜索"
          >
            <el-option label="所有业务" value />
            <el-option
              v-for="item in manageBizCodeOptions"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="orderNo"
          label="订单编号："
        >
          <el-input
            v-model="filterForm.orderNo"
            maxlength="50"
          />
        </el-form-item>
        <div>
          <el-form-item label=" ">
            <el-button type="primary" round @click="submitFilterForm">查 询</el-button>
            <el-button round @click="resetFilterForm">重 置</el-button>
          </el-form-item>
        </div>

      </el-form>
    </div>
    <!-- 筛选条件 end -->

    <!-- 统计卡片 start -->
    <div>
      <AppTableStatisticsCard :statistics-card-data="statisticsCardData" />
    </div>
    <!-- 统计卡片 end -->

    <el-table :data="list" border stripe style="width: 100%" size="small" element-loading-text="加载中" empty-text="暂无数据">
      <el-table-column prop="createTime" label="下单时间" />
      <el-table-column prop="orderNo" label="单号" />
      <el-table-column prop="totalPrice" label="订单金额">
        <template slot-scope="scope">
          <span>{{ scope.row.totalPrice / 100 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="活动商品和数量">
        <!--<template slot-scope="scope">-->
        <!--  <span >{{ scope.row.categoryName }}</span>-->
        <!--</template>-->
      </el-table-column>
      <el-table-column prop="discount" label="优惠/元">
        <template slot-scope="scope">
          <span>{{ scope.row.discount / 100 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="bizCode" label="来源">
        <template slot-scope="scope">
          <span>{{ bizCodeKeyOptions[scope.row.bizCode] || '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="customerName" label="顾客" />
      <!--<el-table-column prop="categoryName" label="优惠/元">-->
      <!--  <template slot-scope="scope">-->
      <!--    <span v-if="scope.row.categoryId&&scope.row.categoryName">{{ scope.row.categoryName }}</span>-->
      <!--    <span v-else>否</span>-->
      <!--  </template>-->
      <!--</el-table-column>-->
      <!-- <el-table-column prop="theme" label="是否分享" fixed></el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <pagination-direction v-if="paginationConfig.total!==0" :config="paginationConfig" @sizeschange="sizesChange" @pagechange="pageChange" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getActivitySingleItemOrders, singleItemOrdersCount } from '@/api/marketing'

export default {
  props: {
    activityDetail: {
      require: true
    }
  },
  data() {
    return {
      // 配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      // 状态
      loading: false,
      // 数据
      filterForm: {
        activityId: '',
        date: null,
        bizCode: '',
        orderNo: null
      },
      list: [],
      statisticsCardData: [],
      listCount: {
        totalDiscount: null,
        totalNum: null,
        totalPrice: null
      }
    }
  },
  computed: {
    ...mapGetters(['manageBizCodeOptions', 'bizCodeKeyOptions'])
  },
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
    this.fetchData()
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    // 获取统计
    // 获取列表
    fetchData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      this.loading = true
      // 加入page
      this.filterForm.page = page
      this.filterForm.pageSize = pageSize
      this.filterForm.activityId = this.activityDetail.id
      const params = Object.assign({}, this.filterForm)
      if (params.date && params.date.length) {
        params.start = params.date[0]
        params.end = params.date[1]
      }
      delete params.date
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      this.loading = true
      Promise.all([this.fetchList(params), this.fetchCount(params)]).then(() => {
        this.loading = false
      })
    },

    // 统计
    fetchList(params) {
      return new Promise((resole) => {
        getActivitySingleItemOrders(params)
          .then((res) => {
            this.list = res.data.list
            this.paginationConfig.total = res.data.total
            this.paginationConfig.page = res.data.pageNum
          })
          .finally(() => {
            resole()
          })
      })
    },

    // 统计
    fetchCount(params) {
      return new Promise((resole) => {
        singleItemOrdersCount(params).then(res => {
          this.statisticsCardData = [
            {
              title: '订单金额合计 / 元',
              value: 0,
              describeList: [],
              detailList: []
            },
            {
              title: '累计销售商品 / 个',
              value: 0,
              describeList: [],
              detailList: []
            },
            {
              title: '累计优惠 / 元',
              value: 0,
              describeList: [],
              detailList: []
            }
          ]
          if (res.data) {
            this.statisticsCardData[0].value = res.data.totalPrice / 100
            this.statisticsCardData[1].value = res.data.totalNum
            this.statisticsCardData[2].value = res.data.totalDiscount / 100
            this.listCount = res.data
          }
        }).finally(() => {
          resole()
        })
      })
    },

    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },

    // 分页page改变
    pageChange() {
      this.fetchData()
    },

    /**
     * 按钮组
     */
    // 查询
    submitFilterForm() {
      this.fetchData(1)
    },

    // 重置
    resetFilterForm() {
      this.$refs.filterForm.resetFields()
    }

    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/* 统计 */
.total-container {
  .marketing-card {
    .cell-item {
      display: flex;

      .label {
        flex: 0 0 160px;
        color: #888888;
        text-align: center;
      }

      .item {
        flex: 1 1 auto;
        color: #000000;
        font-weight: bold;
      }
    }

    .cell-item:not(:last-child) {
      margin-bottom: 10px;
    }
  }
}
</style>
